/*
 * @Descripttion:
 * @version: 1.0.0
 * @Author: Shentong
 * @Date: 2021-04-09 12:34:34
 * @LastEditors: Shentong
 * @LastEditTime: 2021-11-08 22:47:23
 */
import React, { useEffect, useMemo, useState, useCallback } from "react";
import { View, Input, Button, Image } from "@tarojs/components";
import Taro, { useReachBottom, useDidShow, usePullDownRefresh } from "@tarojs/taro";

import { AtAvatar, AtIcon } from 'taro-ui'

import { getOrderList } from '@/api/order'

import smileO from '@/src/assets/icon/smile-o.png'

import Comment from './components/comment/index'

import NoDataIcon from '@/src/assets/icon/noDataIcon.png'

import styles from './index.module.scss'

function Order() {
  // const [data, setData] = useState({ hits: [] });
  const [currentTab, setCurrentTab] = useState(0);
  const [pageNo, setPageNo] = useState(1);
  const [pageSize] = useState(20);
  const [showComment, setShowComment] = useState<boolean>(false)
  
  // 星星、包装、口味
  const [starCount, setStarCount] = useState<number>(5)
  const [statisfyCount, setStatisfyCount] = useState<number>(5)
  const [flavorCount, setFlavorCount] = useState<number>(5)

  // const [activeNames, setactiveNames] = useState([]);


  const [isLoadFinish, setIsLoadFinish] = useState(false)

  const [pageList, setPageList] = useState([{},{}])

  const tabList = useMemo(()=> {
    return [{ title: '全部订单', queryType: 0 }, { title: '待评价', queryType: 1 }, { title: '退款', queryType: 2 }]
  }, [])

  const getOrderPage = useCallback(() => {
    Taro.showLoading({ title: "加载中...", mask: true })
    const params = {
      queryType: currentTab,
      pageNo,
      pageSize
     }
     getOrderList(params).then(res=> {
       const { data} = res
       setPageList(...data)
     }).finally(() => {
       setIsLoadFinish(true)
       Taro.hideLoading();
       Taro.stopPullDownRefresh();
     })
  },[currentTab, pageNo, pageSize])


  const tabClickHandle = (tab, index) => {
    setCurrentTab(index)
  }

  const goOrderDetail = () => {
    Taro.navigateTo({
      url: '/pages/orderDetail/index'
    })
  }

  const commentCloseHandle = () => {
    setShowComment(false)
    setStatisfyCount(5)
    setFlavorCount(5)
    setStarCount(5)
  }

  // 保存成功
  const saveSuccessHandle  =() => {
    commentCloseHandle()
    // 刷新页面 TODO:
  }

  const showCommentLayout = () => {
    setShowComment(true)
  }

  useEffect(() => {
    getOrderPage()
  }, [getOrderPage]);

  // 触底加载
  useReachBottom(() => {
    let num = pageNo + 1
    setPageNo(num)
  })
  
  // 下拉刷新
  usePullDownRefresh(() => {
    if (pageNo !== 1)  setPageNo(1);
    else getOrderPage()
  });

  /**
   * @description vant组件，无法作用到子组件中，以chlder形式传入下去 START
  */
  const statisfyChange = ({ detail }) =>{
    setStatisfyCount(detail)
  }

  const flavorChange = ({ detail }) =>{
    setFlavorCount(detail)
  }

  const starComps = <van-rate value={starCount} voidIcon="star-o" icon="star" size={26} onChange={(e) => setStarCount(e.detail)} />
  const flavorComps = <van-rate value={flavorCount} icon="smile" size={26} voidIcon="smile-o" onChange={flavorChange} />
  const statisfyComps = <van-rate value={statisfyCount} voidIcon="smile-o" icon="smile" size={26} onChange={statisfyChange} />

  /**
   * @description vant组件，无法作用到子组件中，以chlder形式传入下去 END
  */

  return (
    <View className={styles.order}>
      <View className={styles.headerTabs}>
        {
          tabList.map((tab, index) => {
            return (<View
              className={`${styles.tab} ${currentTab === index ? styles.active : null}`}
              key={`tab_${index}`}
              onClick={() => tabClickHandle(tab, index)}
            >{tab.title}</View>)
          })
        }

      </View>
      {
        pageList.map((tab, index) => {
          return (
            <View className={styles.item} key={`tab_${index}`}>
              <AtAvatar image='https://jdc.jd.com/img/200' className={styles.headerImg} size='small'></AtAvatar>
              <View className={styles.rtTtx}>
                <View className={styles.header}>
                    <View className={styles.title} onClick={() => goOrderDetail()}>
                      <View className={styles.name}>来来吃来得及奥拉夫就</View>
                      <AtIcon value='chevron-right' size='18' color='#666'></AtIcon>
                    </View>
                    <View className={styles.status}>已取消</View>
                </View>
                <View className={styles.content}>
                    <View className={styles.ctx}>
                      <View className={styles.prodName}>黄瓜果粒...</View>
                      <View className={styles.count}>共1件商品</View>
                    </View>
                    <View className={styles.price}>共计￥0.02</View>
                </View>
                <View className={styles.btn}>
                  <View className={styles.aBtn} onClick={showCommentLayout}>评价</View>
                  <View className={styles.aBtn}>再来一单</View>
                </View>
              </View>
            </View>
          )
        })
      }
      {/* 暂无数据 */}
      {
         isLoadFinish && !pageList.length && (
          <van-empty description='暂无数据' image={NoDataIcon} />
         )
       }
      
       <View className={styles.layoutBox}  catchMove >
          <Comment 
            showComment={showComment}
            handleClose={commentCloseHandle}
            saveSuccess={saveSuccessHandle}
            starComps={starComps}
            flavorComps={flavorComps}
            statisfyComps={statisfyComps} 
            starCount={starCount}
            flavorCount={flavorCount}
            statisfyCount={statisfyCount}
            shopId=''
            orderId=''
          />
       </View>
    </View>
  );
}

export default Order
